<script lang="ts" setup>
import { ref, reactive, watch } from "vue"
import { usePagination } from "@/hooks/usePagination"
import { ElMessage, type FormRules, type FormInstance } from "element-plus"
import { Search, Refresh } from "@element-plus/icons-vue"
import { getOrderCenterDataApi, updategetOrderCenterApi, updategetOrderCenterApiXZ } from "@/api/order"
import { formatDateTime } from "@/utils"
import { checkName } from "@/utils/validate"
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()
// 查看表格数据
const tableData = ref<any>()
const loading = ref<boolean>(false)
const getTableData = () => {
  loading.value = true
  getOrderCenterDataApi({
    page: paginationData.currentPage,
    size: paginationData.pageSize,
    withdrawals_type: 2, // 下级推广佣金
    withdrawals_state: 0
  })
    .then((res: any) => {
      tableData.value = res.data.list
      paginationData.total = res.data.total
      console.log(res, "数据")
    })
    .catch(() => {
      tableData.value = []
    })
}
// getCode({}).then((res: any) => {
//   console.log(res)
// })
/** 监听分页参数的变化 */
watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })
const dialogVisible = ref(false)
const dialogVisible1 = ref(false)
const dialogVisible2 = ref(false)
const id = ref<any>()
const formSP = reactive({
  withdrawals_card_name: "", // 银行卡姓名
  withdrawals_card_id: "", // 银行卡号
  withdrawals_bank: "", // 开户行
  withdrawals_time: "",
  withdrawals_retail_level: "",
  withdrawals_monthly_sales: "",
  withdrawals_shipment_success: "",
  withdrawals_activation_success: "",
  withdrawals_money: "",
  withdrawals_state: "",
  withdrawals_img: "", // 图片
  withdrawals_remark: "",
  withdrawals_user_name: "" // 名字
})
// 提现
const addTx = (row: any) => {
  id.value = row.id
  formSP.withdrawals_card_name = "" // 银行卡姓名
  formSP.withdrawals_card_id = "" // 银行卡号
  formSP.withdrawals_bank = "" // 开户行
  formSP.withdrawals_time = formatDateTime(row.withdrawals_time)
  formSP.withdrawals_retail_level = row.withdrawals_retail_level
  formSP.withdrawals_monthly_sales = row.withdrawals_monthly_sales
  formSP.withdrawals_shipment_success = row.withdrawals_shipment_success
  formSP.withdrawals_activation_success = row.withdrawals_activation_success
  formSP.withdrawals_money = row.withdrawals_money
  formSP.withdrawals_img = row.withdrawals_img // 图片
  formSP.withdrawals_remark = row.withdrawals_remark
  formSP.withdrawals_user_name = row.withdrawals_user_name
  dialogVisible.value = true
  console.log(row, "查看当前数据")
}
// 确定提现
const formRef = ref<FormInstance | null>(null)
const addQd = () => {
  formRef.value?.validate((valid: boolean) => {
    if (valid) {
      updategetOrderCenterApi({
        id: id.value,
        withdrawals_card_name: formSP.withdrawals_card_name,
        withdrawals_card_id: formSP.withdrawals_card_id,
        withdrawals_bank: formSP.withdrawals_bank,
        withdrawals_time: formSP.withdrawals_time,
        withdrawals_retail_level: formSP.withdrawals_retail_level,
        withdrawals_monthly_sales: formSP.withdrawals_monthly_sales,
        withdrawals_shipment_success: formSP.withdrawals_shipment_success,
        withdrawals_activation_success: formSP.withdrawals_activation_success,
        withdrawals_money: formSP.withdrawals_money,
        withdrawals_state: 2,
        withdrawals_img: formSP.withdrawals_img,
        withdrawals_user_name: formSP.withdrawals_user_name
      }).then((res: any) => {
        console.log(res, "提现")
        ElMessage.success("申请成功")
        getTableData()
      })
      dialogVisible.value = false
    } else {
      return false
    }
  })
}
// 取消
const resetForm = () => {
  dialogVisible.value = false
  formSP.withdrawals_card_name = ""
  clearValidate()
}
const clearValidate = () => {
  formRef.value?.clearValidate()
}
// 详情弹出框
// #region
const ruleForm = reactive<any>({})
const handleClick = (row: any) => {
  console.log("拿到当前行数据", row)
  dialogVisible1.value = true
  ruleForm.withdrawals_time = row.ruleFormwithdrawals_time
  ruleForm.withdrawals_card_name = row.withdrawals_card_name
  ruleForm.withdrawals_retail_level = row.withdrawals_retail_level
  ruleForm.withdrawals_monthly_sales = row.withdrawals_monthly_sales
  ruleForm.withdrawals_shipment_success = row.withdrawals_shipment_success
  ruleForm.withdrawals_activation_success = row.withdrawals_activation_success
  ruleForm.withdrawals_money = row.withdrawals_money
  ruleForm.withdrawals_state = row.withdrawals_state
  ruleForm.withdrawals_card_id = row.withdrawals_card_id
  ruleForm.withdrawals_bank = row.withdrawals_bank
  ruleForm.withdrawals_img = row.withdrawals_img
  ruleForm.withdrawals_remark = row.withdrawals_remark
  ruleForm.withdrawals_user_name = row.withdrawals_user_name
}
const handleXZ = (row: any) => {
  console.log(row.id, "下载")
  updategetOrderCenterApiXZ({ id: row.id }).then((res: any) => {
    console.log(res, "点击下载的按钮")
    const blob = new Blob([res.data], {
      type: "application/xlsx;charset=utf-8"
    })
    // console.log(res)
    const downloadElement = document.createElement("a")
    const href = window.URL.createObjectURL(blob)
    downloadElement.href = href
    downloadElement.download = "订单.xlsx"
    document.body.appendChild(downloadElement)
    downloadElement.click()
    window.URL.revokeObjectURL(href)
  })
}
// 提现认证
const withdrawalsNumber = (rule: any, value: any, callback: any) => {
  const reg = /^[1-9]\d{9,29}$/
  if (!value) {
    return callback(new Error("请输入银行卡号！"))
  }
  setTimeout(() => {
    if (!reg.test(value)) {
      callback(new Error("请输入正确银行卡号！"))
    } else {
      callback()
    }
  }, 100)
}
const withdrawalsName = (rule: any, value: any, callback: any) => {
  const reg = /[\u4e00-\u9fa5]/
  if (!value) {
    return callback(new Error("请输入银行卡开户行！"))
  }
  setTimeout(() => {
    if (!reg.test(value)) {
      callback(new Error("只能为中文！"))
    } else {
      callback()
    }
  }, 100)
}
const formRules: FormRules = reactive({
  withdrawals_card_name: [
    { required: true, trigger: "blur", message: "请填写银行卡姓名" },
    { required: true, validator: checkName, trigger: "blur" }
  ],
  withdrawals_card_id: [
    { required: true, trigger: "blur", message: "请填写银行卡号" },
    { required: true, validator: withdrawalsNumber, trigger: "blur" }
  ],
  withdrawals_bank: [
    { required: true, trigger: "blur", message: "请填写开户行" },
    { required: true, validator: withdrawalsName, trigger: "blur" }
  ]
})

//  #region 搜索
const searchFormRef = ref<FormInstance | null>(null)
const searchData = reactive({
  name: ""
})
const handleSearch = () => {
  if (paginationData.currentPage === 1) {
    // getTableData()
    console.log(1)
  }
  paginationData.currentPage = 1
}
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  if (paginationData.currentPage === 1) {
    // getTableData()
    console.log(2)
  }
  paginationData.currentPage = 1
}
// #endregion

// 1
</script>

<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-card shadow="never" class="search-wrapper">
      <el-form ref="searchFormRef" :inline="true" :model="searchData">
        <el-form-item prop="name" label="搜索">
          <el-input v-model="searchData.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
          <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" align="center" width="70px">
          <template #default="{ $index }">
            {{ (paginationData.currentPage - 1) * paginationData.pageSize + $index + 1 }}
          </template>
        </el-table-column>
        <!-- 时间转换 -->
        <el-table-column prop="withdrawals_time" label="时间" width="180" align="center">
          <template #default="scope">
            {{ formatDateTime(scope.row.withdrawals_time) }}
          </template>
        </el-table-column>
        <!-- <el-table-column prop="withdrawals_card_name" label="套餐名" align="center" /> -->
        <!-- <el-table-column prop="withdrawals_retail_level" label="分销等级" align="center" /> -->
        <!-- <el-table-column prop="withdrawals_monthly_sales" label="月销数量" align="center" /> -->
        <!-- <el-table-column prop="withdrawals_shipment_success" label="发货成功数量" align="center" /> -->
        <!-- <el-table-column prop="withdrawals_activation_success" label="激活成功数量" align="center" /> -->
        <el-table-column prop="withdrawals_money" label="结佣金额" align="center" />
        <el-table-column prop="withdrawals_state.state" label="提现状态 " align="center" />
        <el-table-column label="申请" align="center">
          <template #default="scope">
            <el-button
              text
              type="primary"
              @click="addTx(scope.row)"
              :disabled="scope.row.withdrawals_state.code == 2 || scope.row.withdrawals_state.code == 4"
              >申请提现</el-button
            >
          </template>
        </el-table-column>
        <el-table-column label="详情" align="center">
          <template #default="scope">
            <el-button type="primary" size="small" @click="handleClick(scope.row)">查看详情</el-button>
            <el-button
              style="display: none"
              type="primary"
              size="small"
              @click="handleXZ(scope.row)"
              :disabled="scope.row.withdrawals_state.state === '未提现'"
              >下载</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pager-wrapper">
        <el-pagination
          background
          :layout="paginationData.layout"
          :page-sizes="paginationData.pageSizes"
          :total="paginationData.total"
          :page-size="paginationData.pageSize"
          :currentPage="paginationData.currentPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 审批框 -->
    <el-dialog v-model="dialogVisible" width="30%" @close="resetForm">
      <el-form :model="formSP" label-width="120px" ref="formRef" :rules="formRules">
        <el-form-item label="银行卡姓名" prop="withdrawals_card_name">
          <el-input v-model="formSP.withdrawals_card_name" />
        </el-form-item>
        <el-form-item label="银行卡号" prop="withdrawals_card_id">
          <el-input v-model="formSP.withdrawals_card_id" />
        </el-form-item>
        <el-form-item label="开户行" prop="withdrawals_bank">
          <el-input v-model="formSP.withdrawals_bank" />
        </el-form-item>
        <el-form-item label="提现金额">
          <el-input v-model="formSP.withdrawals_money" disabled />
        </el-form-item>
      </el-form>
      <div class="btn">
        <el-form-item>
          <el-button type="primary" @click="addQd"> 确定 </el-button>
          <el-button @click="resetForm">取消</el-button>
        </el-form-item>
      </div>
    </el-dialog>
    <!-- 详情弹出框 -->
    <el-dialog v-model="dialogVisible1" :model="ruleForm" title="详细信息" width="50%">
      <el-form :model="ruleForm" ref="ruleFormRef" label-width="120px">
        <el-form-item prop="withdrawals_user_name" label="账户名">
          <el-input v-model="ruleForm.withdrawals_user_name" disabled />
        </el-form-item>
        <!-- <el-form-item prop="withdrawals_retail_level" label="分销等级">
          <el-input v-model="ruleForm.withdrawals_retail_level" disabled />
        </el-form-item> -->
        <!-- <el-form-item prop="withdrawals_monthly_sales" label="月销量">
          <el-input v-model="ruleForm.withdrawals_monthly_sales" disabled />
        </el-form-item>
        <el-form-item prop="withdrawals_shipment_success" label="发货成功量">
          <el-input v-model="ruleForm.withdrawals_shipment_success" disabled />
        </el-form-item> -->
        <!-- <el-form-item prop="withdrawals_activation_success" label="激活成功数量">
          <el-input v-model="ruleForm.withdrawals_activation_success" disabled />
        </el-form-item> -->
        <el-form-item prop="withdrawals_money" label="提现金额">
          <el-input v-model="ruleForm.withdrawals_money" disabled />
        </el-form-item>
        <el-form-item prop="withdrawals_card_name" label="银行卡姓名">
          <el-input v-model="ruleForm.withdrawals_card_name" disabled />
        </el-form-item>
        <el-form-item prop="withdrawals_card_id" label="银行卡号">
          <el-input v-model="ruleForm.withdrawals_card_id" disabled />
        </el-form-item>
        <el-form-item prop="withdrawals_bank" label="开户行">
          <el-input v-model="ruleForm.withdrawals_bank" disabled />
        </el-form-item>
        <!-- 打款图片 -->
        <el-form-item prop="image" label="打款图片">
          <el-image
            v-if="ruleForm.withdrawals_img !== ''"
            :src="ruleForm.withdrawals_img.replace(/\$cg\$/g, '+')"
            style="width: 100px; height: 100px; cursor: pointer"
            @click="dialogVisible2 = true"
          />
          <el-empty v-else :image-size="200" />
        </el-form-item>
        <el-form-item prop="note" label="备注">
          <el-input v-model="ruleForm.withdrawals_remark" disabled />
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog v-model="dialogVisible2" :model="ruleForm" width="50%" @close="dialogVisible2 = false">
      <el-image v-if="ruleForm.withdrawals_img !== ''" :src="ruleForm.withdrawals_img.replace(/\$cg\$/g, '+')" />
      <el-empty v-else :image-size="200" />
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;
  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}
.set-popper {
  max-width: 500px;
}
.set-content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.btn {
  display: flex;
  justify-content: flex-end;
}
.pager-wrapper {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
